<template>
    <div class="deptStyle">
        <el-input
                placeholder="输入关键字进行过滤"
                prefix-icon="el-icon-search"
                v-model="filterText">
        </el-input>

        <el-tree class="treeStyle"
                :data="allDepts"
                :props="defaultProps"
                :filter-node-method="filterNode"
                 :expand-on-click-node="false"
                ref="tree">
            <!--
                树形控件元素后添加操作栏，用于部门操作
                slot-scope:
                node:元素(props中定义内容)
                data:当前节点数据行内容
            -->
             <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
                  type="primary"
                  size="small"
                  class="deptBtnStyle"
                  @click="() => showAddDeptDialog(data)">
            添加部门
          </el-button>
          <el-button
                  type="danger"
                  size="small"
                  class="deptBtnStyle"
                  @click="() =>   removeDept(data)">
            删除部门
          </el-button>
        </span>
      </span>
        </el-tree>
        <!--添加部门弹框区域-->
        <el-dialog
                title="添加部门"
                :visible.sync="dialogVisible"
                width="30%"
              >
            <div>
                <el-tag type="primary">上级部门</el-tag>
                <span style="margin-left: 30px">{{parentDeptName}}</span>
            </div>
            <div style="margin-top: 10px">
                <el-tag>部门名称</el-tag>
                <el-input v-model="addDept.name" style="width: 200px;margin-left: 30px" placeholder="请输入部门名称" size="small"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="doAddDept">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "DeptManager",
        data(){
            return{
                allDepts:[],//所有部门数组
                filterText:'',//搜索字段内容
                defaultProps: {
                    children: 'children',
                    label: 'name'//显示内容，此处为部门名称
                },
                dialogVisible:false,//添加部门对话框是否显示
                addDept:{
                    name:'',
                    parentId:-1
                },
                parentDeptName:''//父部门名称
            }
        },
        watch: {
            /*
                监控搜索文本框输入内容是否发生变化
                val:搜索框中输入搜索内容
             */
            filterText(val) {
                //获得具体树形组件并执行filter(:filter-node-method配置的执行过滤方法)执行过滤操作
                this.$refs.tree.filter(val);
            }
        },
        mounted() {
            this.initDeparts();
        },
        methods:{
            initDept(){
                this.addDept = {
                    name: '',
                    parentId: -1
                }
                this.parentDeptName = '';
            },
            /*
            添加部门信息后，刷新部门树
            deps:所有部门树数组
            dep:添加部门信息
            */
            addDepToDeps(deps,dep){
                //对所有部门数组信息进行遍历
                for(let i=0;i<deps.length;i++)
                {
                    let dept=deps[i];
                    //所有部门数组中元素的部门标识与添加部门信息父部门标识一致
                    if(dept.id==dep.parentId)
                    {
                        dept.children=dept.children.concat(dep);//将新添加的部门信息使用concat函数添加至dept下,展开树形控件
                        return;
                    }
                    else
                    {
                        //未匹配到，从当前部门子部门元素中进行匹配
                        this.addDepToDeps(dept.children,dep);
                    }
                }
            },
            /*
            从组织机构树中移除被删除树节点
            p:parent->上级节点
            deps：所有机构树数组
            depId:被删除树节点标识
            */
            removeDepFromDeps(p,deps,depId)
            {
                //对所有组织机构树数组进行遍历
                for(let i=0;i<deps.length;i++){
                    let d = deps[i];
                    //数组中元素的部门标识和传入的被删除的部门标识一致
                    if (d.id == depId) {
                        //从数组中被移除元素位置移除一个元素
                        deps.splice(i, 1);
                        //如果数组长度为0，没有子元素，设置上级节点parent为false
                        if (deps.length == 0) {
                            p.parent = false;
                        }
                        return;
                    }else{
                        //未和传入的被删除部门标识匹配到，从当前节点的子节点中进行匹配和移除元素
                        this.removeDepFromDeps(d,d.children,depId);
                    }
                }
            },
            /*
            删除部门信息
            */
           removeDept(data){
               //如果下面有子部门，无法执行删除操作
                if (data.parent) {
                    this.$message.error("父部门删除失败");
                } else {
                    this.$confirm('此操作将永久删除【' + data.name + '】部门, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //点击确定按钮回调事件，执行删除部门操作
                        this.deleteRequest("/sys/basic/depart/"+data.id).then(resp=>{
                            if (resp) {
                                //从组织机构树种移除被删除节点
                                this.removeDepFromDeps(null,this.allDepts,data.id);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            },
            /*
            添加组织机构树节点
            */
            doAddDept()
            {
                this.postRequest("/sys/basic/depart/",this.addDept).then(resp=>{
                    if(resp)
                    {
                        this.addDepToDeps(this.allDepts,resp.obj);
                        this.initDept();
                        this.dialogVisible=false;
                    }
                });
            },
            /*
            * 显示添加部门对话框
            * data:点击添加部门数据行记录
            * */
            showAddDeptDialog(data){
                this.parentDeptName=data.name;
                this.addDept.parentId=data.id;
                this.dialogVisible=true;
            },
            /*
             *页面加载时初始化所有部门树信息
             **/
            initDeparts(){
                this.getRequest("/sys/basic/depart/").then(resp=>{
                    if(resp)
                    {
                        this.allDepts=resp;
                    }
                })
            },
            /*
               具体树形控件过滤方法
               value:搜索框中输入搜索内容
               data:返回部门数组
             */
            filterNode(value, data) {
                /*
                    如果搜索框未输入内容，不执行过滤方法直接返回
                    否则从返回部门数组中按照部门名称属性与搜索框内容进行匹配，并返回匹配到的结果
                 */
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            }
        }
    }
</script>

<style>
    .deptStyle{
        width: 500px;
        margin-top: 20px;
        margin-left: 20px;
    }
    .treeStyle {
        margin-top: 20px;
    }
    .custom-tree-node {
        display: flex;
        justify-content: space-between;
        width: 100%;
       margin-top: 5px;

    }
    .deptBtnStyle
    {
        padding: 2px;
    }
</style>